<template>
  <div>
    <el-card>
      <div class="employeePhoto">
        <div class="sun_title">
          <span>员工照片</span>
        </div>
        <el-upload ref='uploader' :auto-upload='false' :class="employeeInfo.imgUrl ? 'hide': ''" :limit='1'
                   :disabled="type"
                   :on-change='handleChange'
                   :on-remove='removeChange'
                   :file-list='fileList'
                   action='#'
                   list-type='picture-card' style='margin: auto;width: 50%;text-align: center;margin-top: 10px'>
          <i class='el-icon-plus avatar-uploader-icon'></i>
        </el-upload>
      </div>
      <div class="basicInformation">
        <div class="sun_title">
          <span>基本信息</span>
        </div>
        <el-form ref="form" :model="employeeInfo" label-width="80px" style="margin-top: 20px">
          <el-row :gutter="20">
            <!--用户名-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.username') }}:</div>
              <div class="edit_input">
                <el-input :disabled="type" v-model="employeeInfo.username"
                          :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.username')" size="mini"></el-input>
              </div>

            </el-col>
            <!--姓名-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.name') }}:</div>
              <div class="edit_input">
                <el-input :disabled="type" v-model="employeeInfo.name"
                          :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.name')" size="mini"></el-input>

              </div>
            </el-col>
            <!--电话-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.mobile') }}:</div>
              <div class="edit_input">
                <el-input :disabled="type" v-model="employeeInfo.mobile"
                          :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.mobile')" size="mini"></el-input>
              </div>

            </el-col>
            <!--邮箱-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.email') }}:</div>
              <div class="edit_input">
                <el-input :disabled="type" v-model="employeeInfo.email"
                          :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.email')" size="mini"></el-input>
              </div>

            </el-col>
            <!--用户编号-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.userNumber') }}:</div>
              <div class="edit_input">
                <el-input :disabled="true" v-model="employeeInfo.userNumber"
                          :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.userNumber')"
                          size="mini"></el-input>
              </div>

            </el-col>

            <!--角色-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.roleId') }}:</div>
              <div class="edit_input">
                <el-select v-model="employeeInfo.roleId" :disabled="type" multiple :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.roleId')" size="mini">
                  <el-option v-for="item in StorefrontInfoSelectList" :key="item.id" :label="item.roleName"
                             :value="item.id"></el-option>
                </el-select>
              </div>

            </el-col>
              <!--是否开启 1开 0关-->
              <el-col :span="8">
                <div class="edit_title">{{ $t('mallSysUserList.mgState') }}:</div>
                <div class="edit_input">
                  <el-radio :disabled="type" v-model="employeeInfo.mgState" :label="1">开启</el-radio>
                  <el-radio :disabled="type" v-model="employeeInfo.mgState" :label="0">关闭</el-radio>
                </div>

              </el-col>

            <!--密码-->
            <el-col :span="8">
              <div class="edit_title">{{ $t('mallSysUserList.password') }}:</div>
              <div class="edit_input">
                <el-input :disabled="isEditPassword" v-model="employeeInfo.password" show-password  :placeholder="$t('common.pleaseEnter')+$t('mallSysUserList.password')"
                          size="mini"></el-input>
                <el-button v-if="xiugai" type="text" @click="isEditPassword=!isEditPassword">
                  {{ isEditPassword ? '修改密码' : '取消修改' }}
                </el-button>
              </div>

            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="text-align: center;margin-top: 20px">
        <edit-box btn-icon="el-icon-back" btn-type="backTo" css-type=""
                  @click.native='$router.push({ path : "users" } )'></edit-box>
        <edit-box btn-icon="el-icon-check" btn-type="submit" css-type="success" @click.native="addEmployeePage"
                  v-if="!type"></edit-box>
      </div>
    </el-card>
  </div>
</template>

<script>

import {getByUserId,addUser} from '@/api/UserApi'
import {getOrgList} from '@/api/RoleApi'
import editBox from '../component/editBox'
import breadcrumbBox from '../component/breadcrumbBox'

export default {
  name: "employeeAddEdit",
  data() {
    return {
      isEditPassword: true,
      xiugai: false,
      fileList: [],
      employeeInfo: {
        mgState: 1,
        isAdmin: 2,
        imgUrl: ""
      },
      StorefrontInfoSelectList: [],
      type: false,
      pageInfo: {
        name: "添加",
        type: false,
      },
    }
  }
  ,
  methods: {
    removeChange() {
      this.fileList = []
      this.employeeInfo.imgUrl = ""
    },
    async handleChange(file) {
      let form = new FormData()
      form.append('httpFile', file.raw)
      const {data: resAll} = await this.$http.post('/mall-sys-user/uploadMallGoodsImg', form
          , {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'Token': window.sessionStorage.getItem('token')
            }
          })

      this.employeeInfo.imgUrl = resAll.data.path
      this.imageUrl = this.$baseURL + resAll.data.path
      this.filelist = [{url: this.$baseURL + resAll.data.path}]
    },
    /*保存用户*/
    addEmployeePage() {
      console.log(this.employeeInfo)
      addUser(this.employeeInfo).then(res => {
        if (res.code === 20000) {
          this.pageInfo = {}
          this.$router.push({path: '/employeeList'})
          return this.$notify({title: '成功', message: res.message, type: 'success'});
        }
      })
    },
    /*查询用户信息*/
    getByDictId(id) {
      getByUserId(id).then(res => {
        //if (res.code != 20000) this.$message.error(res.message)
        this.employeeInfo = res.data.userInfoAll
        this.fileList = [{url: this.$baseURL + this.employeeInfo.imgUrl}]
      })
    },
    /*获取角色列表*/
    InitOrgList(){
      getOrgList().then(res => {
        this.StorefrontInfoSelectList=res.data.list
      })
    }
  },
  created() {
    this.pageInfo.name = this.$route.query.name
    this.isEditPassword = false
    this.InitOrgList()
    if (this.pageInfo.name === this.$t('common.view')) {
      this.type = true
      this.isEditPassword = false
      this.xiugai = false
    }
    if (this.pageInfo.name === this.$t('common.upt')) {
      this.xiugai = true
    }
    if (this.pageInfo.name === this.$t('common.add')) {
      this.xiugai = false
    }
    if (this.pageInfo.name !== this.$t('common.add')) {
      this.isEditPassword = true
      this.getByDictId(this.$route.query.id)
    }
  },

  components: {
    editBox, breadcrumbBox
  }

}
</script>

<style lang="less" scoped>
.hide::v-deep .el-upload--picture-card {
  display: none;
}

.employeePhoto {
  border: 1px solid #EEEEEE;
  padding: 10px;
}

.basicInformation {
  margin-top: 10px;
  border: 1px solid #EEEEEE;
  padding: 10px;
}

.sun_title {
  font-size: 10px;
  height: 20px;
  border-bottom: 1px solid #EEEEEE;
}

.edit_title {
  padding: 10px;
  font-size: 10px;
  color: #894e54;
}

.edit_input {
  padding: 10px;
}
</style>
